<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #left {
            width: 400px;
            height: 600px;
            border: 1px solid red;
            margin-left: 10px;
            margin-top: 10px;
            float: left;
        }

        #right {
            float: left;
            margin-left: 200px;
        }

        #top {
            width: 400px;
            height: 400px;
            position: relative;
        }

        #smallimg {
            width: 400px;
            height: 400px;
        }

        #shadow {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            background-color: rgba(228, 17, 17, 0.5);
        }

        #big {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 500px;
            top: 0;
            border: 1px solid red;
            overflow: hidden;
            border-radius: 50%;
        }

        #bigimg {
            width: 800px;
            height: 800px;
            position: absolute;
        }

        .bottom {
            width: 400px;
            margin-top: 50px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="left" ref="left">
            <div id="top" @mousemove="move" @mouseover="over" @mouseout="out">
                <img id="smallimg" :src="img" draggable="false">
                <div id="shadow" :style="shadowStyle" v-show="flag"></div>


                <div id="big" v-show="flag" ref="big" :style="bigStyle">
                    <img id="bigimg" ref="bigimg" :src="img" draggable="false" :style="bigimgStyle" />
                </div>
            </div>
            <div class="bottom" v-if="info.imglist">
                <div class="item" v-for="item  in  info.imglist.split('|')" @mouseover="changeImg(item)">
                    <!-- 连续点击的时候  要注意判断 -->
                    <img :src="item" draggable="false">
                </div>

            </div>
        </div>
        <div id="right">
            <div>
                商品名称 {{info.goodsname}}
            </div>
            <div>
                商品价格 {{info.goodsprice}}
            </div>
            <div>
                购买数量 <input v-model="buynum" /> <button @click="addShoppingcar">加入购物车</button>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            buynum: 1,
            info: {},
            flag: false,
            shadowStyle: {//shadow的样式
                left: 0,
                top: 0,
            },
            bigimgStyle: {
                left: 0,
                top: 0
            },
            bigStyle: {
                left: 0,
                top: 0
            },
            shadowWidth: 200,//遮罩层
            topWidth: 400,//top
            boxLeft: 10,//left距离左边的距离
            boxTop: 10,
            bigimgWidth: 800,//大图的宽度
            bigWidth: 400,//
            img: "",
        },
        methods: {
            async addShoppingcar() {
                //加入购物车
                //需要用户编号
                //商品编号
                //购买的数据
                //商品名称  价格  图片
                let userinfo = window.localStorage.getItem("userinfo");
                if (userinfo) {
                    userinfo = JSON.parse(userinfo);//字符串转成对象

                    let userid = userinfo.id;//用户编号
                    // let  goodsid = this.info.id;//商品编号
                    let buynum = this.buynum*1;//购买的数量
                    let { id: goodsid, goodsname, goodsprice, goodsimg } = this.info;//解构

                    //先查询  该用户是否买过该商品
                    let { data: list } = await axios({
                        method: "get",
                        url: "http://localhost:2345/shoppingcar",
                        params: {
                            goodsid,
                            userid
                        }
                    })
                    if (list.length) {//存在
                        let existInfo = list[0];
                        //更新只能通过id
                      await  axios({
                          method:"patch",
                          url:"http://localhost:2345/shoppingcar/"+existInfo.id,
                          data:{
                              buynum:existInfo.buynum*1+this.buynum*1
                          }

                      })

                    } else {
                        await axios({ //新增
                            method: "post",
                            url: "http://localhost:2345/shoppingcar",
                            data: {
                                userid,
                                goodsid,
                                goodsname,
                                goodsprice,
                                goodsimg,
                                buynum
                            }
                        })
                    }

                    if(confirm("添加成功 是否立即进入购物车")){
                        window.location.href ="shoppingcar.html";
                    }else{
                        window.location.href ="list.html";
                    }




                } else {

                    window.localStorage.setItem("backurl", window.location.href);
                    window.location.href = "login.html";

                }



            },
            over() {
                this.flag = true;
            },
            out() {
                this.flag = false;
            },
            move(e) {
                // console.log(e.clientX);
                //计算shadow的位置  
                let x = e.clientX - this.shadowWidth / 2 - this.boxLeft;
                let y = e.clientY - this.shadowWidth / 2 - this.boxTop;

                let max = this.topWidth - this.shadowWidth;//因为是正方形

                if (x <= 0) {
                    x = 0;
                }
                if (y <= 0) {
                    y = 0;
                }

                if (x >= max) {
                    x = max;
                }
                if (y >= max) {
                    y = max;
                }

                //已知x   和x所在的最大长度  big最大的长度   求bigx  

                //  x:400= ?:800

                let bigImgX = x * this.bigimgWidth / this.topWidth;
                let bigImgY = y * this.bigimgWidth / this.topWidth;


                let bigX = x - (this.bigWidth / 2 - this.shadowWidth / 2);
                let bigY = y - (this.bigWidth / 2 - this.shadowWidth / 2);





                Object.assign(this.bigimgStyle, { left: -bigImgX + "px", top: -bigImgY + "px" })
                Object.assign(this.shadowStyle, { left: x + "px", top: y + "px" });
                Object.assign(this.bigStyle, { left: bigX + "px", top: bigY + "px" });




            },
            changeImg(img) {
                this.img = img.replace("50x50", "400x400");
            },
        },
        mounted() {

            this.shadowWidth = parseFloat(window.getComputedStyle(document.getElementById("shadow"))["width"]);
            console.log(this.shadowWidth);
            this.topWidth = document.querySelector("#top").offsetWidth;
            this.boxLeft = this.$refs.left.offsetLeft;
            this.boxTop = this.$refs.left.offsetTop;
            this.bigimgWidth = parseFloat(window.getComputedStyle(this.$refs.bigimg)["width"]);
            this.bigWidth = parseFloat(window.getComputedStyle(this.$refs.big)["width"]);
        },
        async created() {
            let search = window.location.search;//获取参数
            //console.log(search);
            if (search) {
                let id = search.split("=")[1];//不严谨的取值
                // alert(id); 根据id获取该商品的信息
                let { data: list } = await axios({
                    method: "get",
                    url: "http://localhost:2345/goodsinfos",
                    params: {
                        id
                    }
                })
                this.info = list[0];
                this.img = this.info.goodsimg;


            } else {
                window.location.href = "list.html";
            }

        }
    })


</script>

</html>